<template>
	<view class="page-content">
		<view class="page-body">
			<view v-if="datalist && datalist.length > 0 ">
				<block v-for="(item,index) in datalist" :key="index">
					<view class="list-li" @click="topage(item)">
						<view class="list-li-l">
							<view class="list-li-l-tit">{{item.title}}({{item.number}}人)</view>
							<view class="list-li-l-mon">{{item.money}}元/队</view>
						</view>
						<view class="list-li-r">
							<view class="icons icon-gengduo"></view>
						</view>
					</view>
				</block>
			</view>
			<!--无数据-->
			<empty v-else no-full type="noData"></empty>
		</view>
	</view>
</template>

<script>
	import {
		getgamegroups //获取赛事组别
	} from '@/common/api.js'
	export default {
		components: {},
		data() {
			return {
				tp_id:'',
				datalist: []
			}
		},
		onShow(){
			this.getdata();
		},
		onLoad(option) {
			console.log(222, option)
			this.tp_id = option.id;
		},
		methods: {
			getdata(){
				getgamegroups({id:this.tp_id}).then(res => {
					console.log(1,res)
					this.datalist = res.data
				})
			},
			topage(item){
				uni.navigateTo({
					url: `/pages/signUp/sign_detail?tp_id=${this.tp_id}&item=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-content {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.page-body {
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: 30rpx;

		.list-li {
			background-color: #fff;
			height: 90rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.list-li-l {
				display: flex;
				font-size: 28rpx;

				.list-li-l-tit {
					margin-right: 20rpx;
					font-weight: bold;
					color: #333333;
				}

				.list-li-l-mon {
					font-weight: bold;
					color: #FE5050;
				}
			}
		}
	}
</style>
